<template>
  <view>
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无消息~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar title="消息通知"></u-navbar>
      </view>

      <view v-for="(item, index) in itemList" :key="index">
        <view v-if="item.content.senderNickname" class="view_box">
          <u-avatar :src="item.content.senderAvatar" size="90"></u-avatar>
          <view class="view-info" @click="routeTo2(item)">
            <view>
              {{ item.content.senderNickname }}
            </view>
            <view class="view-info-p" v-if="item.content.contentType == 102"> [图片] </view>
            <view class="view-info-p" v-else-if="item.content.contentType == 103"> [语音] </view>
            <view class="view-info-p" v-else-if="item.content.contentType == 104"> [视频] </view>
            <view class="view-info-p" v-else-if="item.content.content">
              {{
                item.content.content.length > 11
                  ? item.content.content.substr(0, 11) + '...'
                  : item.content.content
              }}
            </view>
          </view>
          <view style="align-self: flex-start; position: relative">
            <u-badge
              v-if="item.msgCount"
              type="error"
              :count="item.msgCount"
              :offset="[60, 22]"
            ></u-badge>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      itemList: []
    }
  },
  onLoad() {
    uni.$on('msgCenterRefresh', () => {
      this.queryList()
    })
  },
  onShow() {
    this.queryList()
  },
  methods: {
    queryList(page, pageSize) {
      const list = uni.getStorageSync('chatList') || []
      this.$nextTick(() => {
        this.$refs.paging.complete(uni.getStorageSync('chatList'))
      })
    },
    routeTo(url) {
      uni.navigateTo({
        url: '/other/message-info/message-info'
      })
    },
    routeTo2(e) {
      e.msgCount = 0
      uni.setStorageSync('chatList', this.itemList)
      uni.$emit('msgCount')
      this.$u.post('/app-api/im/conversation/update-last-read-time', {
        type: 1,
        targetId: e.content.senderId,
        lastReadTime: this.$utils.parseTime(new Date())
      })
      uni.navigateTo({
        url: '/other/customer-chat/customer-chat?id=' + e.content.senderId
      })
    }
  }
}
</script>

<style>
page {
  background-color: #f2f2f2;
}
.msg-area {
  padding: 20rpx;
}

.msg-box {
  position: relative;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.new-msg {
  position: absolute;
  right: 20rpx;
  top: 30rpx;
  width: 10rpx;
  height: 10rpx;
  border-radius: 10rpx;
  background-color: #ff4754;
}
.msg-title {
  padding: 20rpx;
  font-size: 30rpx;
}
.msg-tip {
  padding: 20rpx;
  font-size: 24rpx;
  color: #999999;
}

.view_box {
  display: flex;
  padding: 20rpx;
  align-items: center;
  background-color: #fff;
  border-bottom: #ededed solid 2rpx;
}
.view-info {
  flex: 1;
  margin-left: 10rpx;
  line-height: 55rpx;
}
.view-info-p {
  font-size: 26rpx;
  color: #999;
}
.view-tip {
  width: 90rpx;
  height: 90rpx;
  border-radius: 90rpx;
  color: #fff;
  font-size: 24rpx;
  line-height: 90rpx;
  text-align: center;
}
</style>
